<template>
  <div class="UserBox">
    <div
        class="UserBox-head"
        :style="{
          width:size+'px',
          height:size+'px',
        }"
        :class="{
          girl:sex==='女' || sex===2
        }"
    >
      <p :style="{fontSize:fontSize+'px'}">{{name.charAt(0)}}</p>
    </div>
    <p v-if="isName">{{name}}</p>
  </div>
</template>
<script>
export default {
  name: "UserBox",
  props: {
    name:{
      type:String,
    },
    src:{
      type:String,
    },
    size:{
      type:Number,
      default: () => {
        return 32;
      },
    },
    fontSize:{
      type:Number,
      default: () => {
        return 14;
      },
    },
    sex:{

    },
    isName:{
      type:Boolean,
      default: () => {
        return true;
      },
    },
  }, // 获取父组件数据
  components: {

  },
  created() {

  },
  data() {
    return {

    };
  },
  methods: {

  },
  computed: {

  }
};
</script>
<style  lang="scss" scoped>
.UserBox{
  display: inline-flex;
  align-items: center;
  &.column{
    width: 100%;
    flex-direction: column;
    justify-content: center;
    >*{
      &:not(:last-child){
        margin-bottom: 8px;
      }
    }
  }
  &:not(.column){
    >*{
      &:not(:last-child){
        margin-right: 8px;
      }
    }
  }
  .UserBox-head{
    border-radius:50%;
    background: #4d99ef;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    &.girl{
      background-color: #fa80b4;
    }
  }
}
</style>
